<template>
  <view>
    <nut-popup position="bottom" v-model:visible="timeShow">
      <nut-date-picker
        v-model="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        type="datetime"
        @confirm="timeConfirm"
        @cancel="timeShow = false"
        :is-show-chinese="true"
      >
      </nut-date-picker>
    </nut-popup>
    <nut-popup position="bottom" v-model:visible="timeEndShow">
      <nut-date-picker
          v-model="currentEndDate"
          :min-date="minDate"
          :max-date="maxDate"
          type="datetime"
          @confirm="timeEndConfirm"
          @cancel="timeEndShow = false"
          :is-show-chinese="true"
      >
      </nut-date-picker>
    </nut-popup>
    <view class="cellGroup">
      <nut-form>
        <nut-form-item label="代送地址" label-width="120rpx">
          <nut-input
            v-model="addressMsg.address"
            class="nut-input-text"
            placeholder="请输入代送地址"
            type="text"
          />
        </nut-form-item>
        <nut-form-item label="配送时段" label-width="120rpx">
          <view style="display: flex;align-items: center">
            <nut-input
                v-model="addressMsg.startTime"
                readonly
                placeholder="请选择"
                type="text"
                @click-input="timeShow = true"
            >
            </nut-input>
            <view>~</view>
            <nut-input
                v-model="addressMsg.endTime"
                readonly
                placeholder="请选择"
                type="text"
                @click-input="timeEndShow = true"
            >
            </nut-input>
          </view>
        </nut-form-item>
      </nut-form>
    </view>

    <view v-if="showList.length">
      <scroll-view :scroll-y="true" class="search_list" @scrolltolower="handleScroll">
        <template v-for="(item, index) in showList">
          <!--          <ListItem :item="item" class="item" @chooseAll="chooseAll" :showList="showList" />-->
          <forwarding-list :item="item" :index="index"/>
        </template>
        <view class="divide"></view>
      </scroll-view>
    </view>
    <view v-else>
      <div class="emptyMain">
        <image class="emptyImg" src="../../assets/images/index/我的订单/wodedingdan_img_quesheng.png" mode="heightFix"></image>
        <p>暂无订单</p>
      </div>

    </view>


    <view class="foot">
      <view class="footLeft">
        <p><span class="priceTitle">代送费</span> <span>￥100</span></p>
        <view class="footMsg">最终费用以值班员开单为准</view>
      </view>
      <view class="btnBox">
        <nut-button type="info">提交订单</nut-button>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from "vue";
// import { OrderListType } from "../orderTracking/listType";
import {changeList, $post, getMyAddressList} from "@/@api";
import { useDidShow } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import useUserInfoStore from "@/store/user";
import forwardInfoStore from "@/store/forward";
import dayjs from "dayjs";
import useTransactionStore, { transaction } from "../../store/pickUp";
import {AddressInfoDirection} from "@/type";
import forwardingList from "@/pages/pickUp/forwardingList.vue";
const userStore = useUserInfoStore();
const forwardStore = forwardInfoStore();
const transactionStore = useTransactionStore();
const checkAll = ref<boolean>(false); //全选按钮
const checkList = ref(); //选中的单子集合
const query = ref({
  keywords: "",
  wxStatus: "",
  start: "",
  end: "",
  flag: "",
});
const params = ref({
  pageNum: 1,
  pageSize: 10,
});
const timeShow = ref<boolean>(false);
const timeEndShow = ref<boolean>(false);
const loading = ref(false);
const showList = ref<any>([]);
showList.value = forwardStore.info
const addressMsg = ref({
  address: '',
  startTime: '',
  endTime: '',
});
const minDate = ref(new Date(2020, 0, 1));
const maxDate = ref(new Date(2025, 0, 1));
const currentDate = ref('');
const currentEndDate = ref('');



const getDefautAddress = async ()=>{
  let data = await getMyAddressList({customerCode:userStore.userInfo.customerCode, infoType: AddressInfoDirection.Getter }) || []
  data = data.filter(item=>{return item.isDefault=='2'})
  if(data.length){
    addressMsg.value.address = data[0].preAddress
  }
}
//时间选择事件
function timeConfirm({ selectedValue, selectedOptions }) {
  let date = selectedValue.slice(0, 3).join("-");
  let time = selectedValue.slice(3).join(":");
  currentDate.value = date + " " + time;
  addressMsg.value.startTime = currentDate.value;
  //   addressMsg.value.time = dayjs(currentDate.value).format("YYYY-MM-DD HH:mm");
  //   console.log(dayjs(currentDate.value).format("YYYY-MM-DD HH:mm"));

  timeShow.value = false;
}
function timeEndConfirm({ selectedValue, selectedOptions }) {
  let date = selectedValue.slice(0, 3).join("-");
  let time = selectedValue.slice(3).join(":");
  currentEndDate.value = date + " " + time;
  addressMsg.value.endTime = currentEndDate.value;
  timeEndShow.value = false;
}
// 懒加载参数
const list = ref<any>([]);

function handleScroll() {
  if (!loading.value) {
    loading.value = true;
    onLoadList();
  }
}
function chooseAll(flag: boolean) {
  if (flag) {
    checkAll.value = true;
  } else {
    checkAll.value = false;
  }
}
function checkBtn() {
  if (!checkAll.value) {
    showList.value.forEach((aa: any) => {
      aa.check = false;
    });
  } else {
    showList.value.forEach((aa: any) => {
      aa.check = true;
    });
  }
}
getDefautAddress()


</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.search_list {
  // height: 50rpx !important;
  overflow: auto;
  padding: 0 24rpx !important;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .item {
    width: 700rpx;
    height: 436rpx;
    background-color: #fff;
    margin-left: 24rpx;
    margin-right: 24rpx;
    margin-bottom: 24rpx;
    border-radius: 10rpx;
    // padding-top: 20rpx;
  }
}
.emptyMain {
  margin: 0 auto;
  margin-top: 200rpx !important;
  width: 300rpx;
  .emptyImg {
    height: 300rpx;
    width: 300rpx;
    background: url("../../assets/images/index/我的订单/wodedingdan_img_quesheng.png")
      no-repeat;
    background-size: cover;
  }
  p {
    text-align: center;
    margin-top: 30rpx;
    color: rgb(171, 171, 171);
  }
}
.foot {
  display: flex;
  justify-content: space-between;
  height: 128rpx;
  width: 100%;
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  border-top: 2rpx solid rgb(215, 215, 215);
  border-bottom: 2rpx solid rgb(215, 215, 215);
  background: white;
  line-height: 128rpx;
  padding: 0 24rpx;
  .btnBox {
    margin-top: -25rpx;
  }
  .footLeft {
    .footMsg {
      font-size: 24rpx;
      line-height: 24rpx;
    }
    p {
      display: flex;
      .priceTitle {
        font-size: 30rpx !important;
        line-height: 70rpx;
        color: #666666 !important;
      }
      span {
        font-size: 40rpx;
        line-height: 70rpx;
        color: #0966ff;
      }
    }
  }
}
.cellGroup {
  padding: 0 24rpx;
  box-sizing: border-box;
  background: #f5f5f5;

}
.nut-form-item__label {
  margin-right: 0;
}
// .addressInput {
//   height: 52rpx;
//   display: flex;
//   .nut-input-text {
//     box-sizing: border-box;
//     height: 52rpx;
//     line-height: 52rpx;
//   }
// }
.lists {
  box-sizing: border-box;
  width: 100%;
}
.container_empty {
  margin-top: 280rpx;
  text-align: center;

  image {
    width: 300rpx;
    height: 300rpx;
  }
  .empty_text {
    font-size: 32rpx;
    color: #999;
  }
}
</style>
